<template>
  <view>
    <u-form-item v-bind="$attrs" borderBottom @click="userPicker">
      <u--input
        v-model="userName"
        :placeholder="placeholder"
        border="none"
        disabled
        disabledColor="#ffffff"
      ></u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
    </u-form-item>

    <u-picker
      :show="show"
      ref="uPicker"
      keyName="name"
      :columns="columns"
      :title="title"
      @cancel="show = false"
      @confirm="confirm"
      @change="changeHandler"
    ></u-picker>

    <u-popup :show="userShow" :round="10" mode="bottom">
      <view class="user-box">
        <u-checkbox-group
          class="checkbox-box"
          v-model="checked"
          placement="column"
          iconPlacement="right"
        >
          <u-checkbox
            class="checkbox-item"
            v-for="(item, index) in userList"
            :key="index"
            :name="item.name + '|' + item.id"
            :label="item.name"
          ></u-checkbox>
        </u-checkbox-group>
        <view class="multiple-btn-box">
          <u-button class="multiple-btn" @click="closeUserPop">关闭</u-button>
          <u-button class="multiple-btn" type="primary" @click="checkedConfirm"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { workUnitApproverAPI } from "../../../api/api.js";
export default {
  props: ["value", "multiple", "title", "placeholder"],
  data() {
    return {
      show: false,
      userShow: false,
      checked: [],
      userList: [],
      userName: "",
      columns: [],
      columnData: [],
      columnData2: [],
    };
  },

  methods: {
    // 打开选择框
    userPicker() {
      this.show = true;
    },
    // 选择改变时候
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values,
        index,
        indexs,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      if (columnIndex === 0) {
        this.loading = true;
        // 模拟网络请求
        // if (!this.multiple) {
        // } else {
        // }
        // 发起请求
        workUnitApproverAPI({ bmId: value[0].id }).then((res) => {
          this.columnData = res.data.gw || [];
          if (this.columnData && this.columnData.length > 0) {
            picker.setColumnValues(1, this.columnData);
            workUnitApproverAPI({
              bmId: value[0].id || "",
              gwId: this.columnData[0].id || "",
            }).then((r) => {
              this.columnData2 = r.data.ry || [];
              if (this.multiple) {
                this.userList = this.columnData2;
              } else {
                picker.setColumnValues(
                  2,
                  this.columnData2 && this.columnData2.length > 0 ? this.columnData2 : []
                );
              }
            });
          } else {
            picker.setColumnValues(1, []);
            picker.setColumnValues(2, []);
          }
        });
      }
      if (columnIndex === 1) {
        workUnitApproverAPI({
          bmId: values[0].id || "",
          gwId: values[1][indexs[1]].id || "",
        }).then((r) => {
          this.columnData2 = r.data.ry || [];
          if (this.multiple) {
            this.userList = this.columnData2;
          } else {
            picker.setColumnValues(
              2,
              this.columnData2 && this.columnData2.length > 0 ? this.columnData2 : []
            );
          }
        });
      }
    },
    // 确定 多选打开用户选择 ，单选则提交
    confirm(e) {
      if (this.multiple) {
        this.userShow = true;
      } else {
        if (e.value.length < 3) {
          this.$refs.uToast.show({
            type: "error",
            icon: false,
            title: "失败主题",
            message: "尚未选择人员",
          });
          return false;
        }
        this.userName = e.value[2].name;
        this.$emit("input", e.value[2].id);
        this.show = false;
      }
    },
    // 多选确定
    checkedConfirm() {
      this.userShow = false;
      this.show = false;
      if (this.checked && this.checked.length > 0) {
        this.userName = this.checked
          .map((item) => item.split("|"))
          .map((item) => item[0])
          .join(",");
        this.$emit(
          "input",
          this.checked
            .map((item) => item.split("|"))
            .map((item) => item[1])
            .join(",")
        );
      }
      this.checked = [];
    },
    // 关闭用户选择
    closeUserPop() {
      this.checked = [];
      this.userShow = false;
      this.show = true;
    },
  },
  mounted() {
    workUnitApproverAPI({}).then((res) => {
      this.columns = [res.data.bm];
      for (let i = 0; i < this.columns[0].length; i++) {
        this.columnData.push([]);
      }
      // console.log(this.columnData, this.columnData.length);
    });
  },
};
</script>

<style scoped>
.user-box {
  height: 30vh;
  background: #fff;
  position: relative;
  overflow-y: scroll;
}
.multiple-btn-box {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  bottom: 10px;
  left: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.multiple-btn {
  width: 45%;
}
.checkbox-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20vh;
  overflow-y: scroll;
}
.checkbox-item {
  width: 90%;
  margin-left: 5%;
  font-size: 1.4rem;
  padding: 14px 0;
  border-bottom: 1px solid #e5e5e5;
}
</style>
